<template>
  <div class="divBox">
    <div id="div5">
      <el-input
        placeholder="搜索..."
        prefix-icon="el-icon-search"
        v-model="QueryName" id="input2"
        size="small"
        @blur="QueryByPage(1)"
      >
      </el-input>
      <!--        div5-->
    </div>


    <div id="div6">
      <el-select v-model="OptionId" placeholder="所属公司 全部" @change="QueryByPage(1)"
                 size="small"
      >
        <el-option value="" label="全部">全部</el-option>
        <el-option
          v-for="item in companyMsg"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      &nbsp;
      <el-select v-model="taskStatus" placeholder="工作状态" @change="QueryByPage(1)"
                 size="small"
      >
        <el-option value="" label="全部">全部</el-option>
        <el-option value="1" label="空闲">空闲</el-option>
        <el-option value="2" label="忙碌">忙碌</el-option>


      </el-select>
      &nbsp;

      <el-button size="small"><i class="el-icon-zoom-in"></i>高级筛选</el-button>
      <!--    div6-->
    </div>
    <div id="div7">
      <el-button type="primary" icon="el-icon-edit" @click="dialogVisible4=true">添加忙碌状态</el-button>

      <!--      div7-->
    </div>

    <div id="div8">
      <el-table
        :data="tableData"
        :key="keyFind"
        style="width: 100%;font-size: 10px"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="makeName"
          label="制作人员"
          width="100">
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="所属公司"
          width="180">
          <template #default="scope">
            <span>{{ scope.row.companyName }}</span><span>/{{ scope.row.groupName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="makeId"
          label="工号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作状态"
          width="180"
        >
          <template #default="scope">
<!--            <el-tag type="danger" v-show="scope.row.status==2">忙碌</el-tag>-->
<!--            <el-tag type="success" v-show="scope.row.status==1">空闲</el-tag>-->
            <el-tag :type="scope.row.color" >{{scope.row.statusMsg}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderDetailNum"
          label="当前任务数"
          width="100">
        </el-table-column>
        <el-table-column
          prop=""
          label="持续时间"
          width="300">
          <template #default="scope">
            <p v-if="scope.row.status===2"><span>{{ scope.row.staffTaskDate.minTaskDate }}
                  ——{{ scope.row.staffTaskDate.maxTaskDate }}</span></p>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="100">
        </el-table-column>
        <el-table-column
          prop="#"
          label="操作"
          width="180">
          <template #default="scope">
            <el-button type="text" v-if="scope.row.status===2" size="small" @click="ClickFinish(scope.row)">结束任务
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--    div8-->
    </div>
    <div id="Limit">

      <el-pagination
        @current-change="QueryByPage"
        :page-size="pageSize"
        :current-page="pagNum"
        layout="total, prev, pager, next"
        :total="pages">
      </el-pagination>

    </div>
    <div id="dialog">
      <el-dialog
        class="dialog"
        title="指派订单"
        :visible.sync="dialogVisible4"
        width="60%"
        :before-close="handleClose">
        <span>选择制作组</span>
        <el-cascader
          ref="cascaderAddr"
          v-model="selectMakeGroup"
          :options="companyMsg"
          :props="cascaderProps"
          style=" width: 200px"
        >
        </el-cascader>
        <template>
          <el-table
            :data="WaitingTask"
            style="width: 100%">
            <el-table-column
              prop="taskName"
              label="任务名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="taskNo"
              label="任务编号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="money"
              label="任务金额">
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注">
            </el-table-column>
            <el-table-column
              prop=""
              label="制作人员">
              <template #default="scope">
                <el-select v-model="scope.row.selectMsg"
                           placeholder="制作员"
                           @change="SetMakePeople(scope.row)"
                           size="small"
                >
                  <el-option
                    size="small"
                    v-for="item in StaffList"
                    :key="item.id"
                    :label="item.makeName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible4=false">取 消</el-button>
    <el-button type="primary" @click="confirmAssignTask()">确 定</el-button>
  </span>
      </el-dialog>
      <!--      对话弹窗div-->
      <el-dialog
        title="提示"
        :visible.sync="finishStatus"
        width="30%"
        style="text-decoration: none"
      >
        <span>是否确认结束当前状态？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="finishStatus = false">取 消</el-button>
    <el-button type="primary" @click="EndCurrentState">确 定</el-button>
  </span>
      </el-dialog>

    </div>

    <!--    工作状态div-->
  </div>
</template>

<script>
import axios from "@/utils/request"
export default {
  name: "workingStatus",
  props: {},
  data() {
    return {
      activeName: 'second',
      company: [],
      companySelectMsg: [],

      pagNum: 1,
      pageSize: 0,
      pages: 0,

      QueryName: "",
      OptionId: "",
      taskStatus: "",
      StaffId: 0,

      companyMsg: [],
      tableData: [],
      tableDataType: [],
      taskList: true,
      workStatus: false,
      dialogVisible4: false,
      finishStatus: false,

      keyFind:false,




      GroupType: " ",
      selectMakeGroup: "",
      GroupId: 0,
      companyId: 0,
      companyName:"",
      cascaderProps: {
        label: "name",//当返回的数据字段不是label和value可以改成实际的字段比如goodsName
        value: "id",
        children: "MakeGroupChildren",
        lazy: true,
        lazyLoad: this.QueryMakeGroup,

        WaitingTask: [],
      },
      count: 1,
      StaffList: {},
      selectMakePeople: "",

      taskNum:[],

    }
  }
  , methods: {
    confirmAssignTask(){//确认指派订单
      console.log(this.taskNum)
      let data={
        id:1,
        list:this.taskNum
      }
      axios.put("http://127.0.0.1/staff/confirmAssignTask",{
        id:1,
        list:this.taskNum
      })
        .then(response => {
          if (response===1) {
            console.log("订单已成功派遣")
            this.dialogVisible4=false;
            this.QueryByPage(1)
            console.log("2")
            this.selectMakeGroup="";
            this.WaitingTask=[];
            this.QueryWaitingTask()
          }else {
            alert("服务器异常")
            }



        }).catch(function (error) {
        alert(error)
      });
    },
    SetMakePeople(e) {
      console.log(e)
      let taskNum={
        id:e.id,
        makeId:e.selectMsg,
        companyId:this.companyId,
        companyName:this.companyName,
      }
      this.taskNum.push(taskNum)

    },
    QueryWaitingTask() {//查询状态为等待中的任务
      axios.get("http://127.0.0.1/staff/QueryWaitingTask")
        .then(response => {
          if (response != undefined) {
            this.WaitingTask = response.list;
            console.log(  response)
          }
        }).catch(function (error) {
        alert(error)
      })
    },
    QueryMakeGroup(node, resolve) {
      console.log(node)
      if (this.count == 1||(node.value!==this.companyId&&node.level===1)) {
        this.count=1;
        this.companyId = node.value;
        this.companyName=node.label;
        console.log("companyId===" + this.companyId)
        console.log(this.companyName)
        axios.get("http://127.0.0.1/staff/QueryMakeGroup", {
          params: {
            id: this.companyId
          }
        })
          .then(response => {
            if (response != undefined) {
              this.count++;
              this.GroupType = response;
              resolve(this.GroupType);
            }
          }).catch(function (error) {
          alert(error)
        })
        //
      } else {
        //清空下拉框数据
        this.selectMakePeople = "";
        this.GroupType = node;
        console.log("GroupType==" + node)
        this.GroupId = node.value;
        console.log("GroupId===" + this.GroupId)
        axios.get("http://127.0.0.1/staff/QueryStaffMsg", {
          params: {
            companyId: this.companyId,
            groupId: this.GroupId
          }
        })
          .then(response => {
            if (response != undefined) {
              this.StaffList = response
              console.log(this.StaffList)
              resolve()

            }
          }).catch(function (error) {
          alert(error)
        })

      }
    },
    ClickFinish(scope) {
      this.StaffId = scope.makeId
      this.finishStatus = true;
    },
    EndCurrentState() {
      alert(1)
      let id = this.StaffId
      axios.put("http://127.0.0.1/staff/EndCurrentStaffState/" + id)
        .then(response => {
          if (response != 0) {
            //关闭对话框
            this.finishStatus = false;
            //刷新任务列表
            this.QueryByPage(1)
          }


        }).catch(function (error) {
        alert(error)
      });
    },
    handleChange(value) {
      alert(1)
      console.log(this.company)
    },
    QueryCompanyInElOption() {
      axios.get("http://127.0.0.1/staff/QueryCompanyMsg")
        .then(response => {
          if (response != undefined) {

            this.company = response;
          }


        }).catch(function (error) {
        alert(error)
      });
    },
    QueryCompanyMsg() {

      axios.get("http://127.0.0.1/api/tOrderDetail/QueryCompanyMsg")
        .then(response => {
          if (response != undefined) {

            this.companyMsg = response;
          }


        }).catch(function (error) {
        alert(error)
      });
    },
    QueryByPage(e) {
      this.pageNum = e
      console.log("当前页==="+this.pageNum)
      axios.get("http://127.0.0.1/staff/QueryAllStaff", {
        params: {
          makeName: this.QueryName,
          companyId: this.OptionId,
          status: this.taskStatus,
          index: this.pageNum,
        }
      })
        .then(response => {
          if (response != undefined) {
            this.tableData = response.list
            this.pages = response.total
            this.pageSize = response.pageSize
            this.pageNum = response.pageNum
            console.log(1111111111111111)
            console.log(this.tableData)
            console.log(22222222222222222222)
            // this.$forceUpdate();
            this.keyFind=!this.keyFind;
          }
        }).catch(function (error) {
        alert(error)
      })
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleClick(tab, event) {
      if (tab.index === "0") {
        this.taskList = true;
        this.workStatus = false
      } else {
        this.taskList = false;
        this.workStatus = true
      }
      console.log(tab, event);
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  }, handleClose(done) {

    this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {
      });
  },
  created: function () {
    this.QueryByPage(1)
    this.QueryCompanyMsg();
    this.QueryCompanyInElOption()
    this.QueryWaitingTask()
  }

}
</script>

<style scoped>
.el-dialog__header {
  text-decoration: none;
}


#div5 {
  display: inline-block;
  position: relative;

}

#div6 {
  display: inline-block;
  position: relative;

}

#div7 {
  display: inline-block;
  position: relative;
  left: 350px;

}

#div8 {
  display: inline-block;
  position: relative;
  top: 15px;

}

#input2 {
  display: block;
  height: 200px;
  width: 50px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

</style>

